<template>
  <div class="app-container">
    <div>
      <h4 style="margin:0 0 1.25rem 0">
        <el-tag type="info">查询条件</el-tag>
      </h4>
      <el-form ref="form" :model="form" label-width="6.25rem" style="display:flex;flex-wrap:wrap;">
        <el-form-item class="form-item" style="font-size: 0.75rem;height: 1.9rem;" label="兑换码">
          <el-input v-model="form.cdkey" placeholder="请填写兑换码" clearable></el-input>
        </el-form-item>
        <el-form-item label="渠道">
          <template slot-scope="scope">
            <el-select v-model="form.mall_type" clearable>
              <el-option v-for="item in mallTypeList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="状态">
          <template slot-scope="scope">
            <el-select v-model="form.status" clearable>
              <el-option v-for="item in statusList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="类型">
          <template slot-scope="scope">
            <el-select v-model="form.install_type" clearable>
              <el-option v-for="item in installTypeList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="form.gmt_create" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="兑换时间">
          <el-date-picker v-model="form.gmt_exchange" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="商城订单号">
          <el-input v-model="form.mall_order_id" placeholder="请输入商城订单号" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.mobile" placeholder="请输入手机号" clearable></el-input>
        </el-form-item>
      </el-form>
      <div class="bfc">
        <el-button class="btn" @click="reset" type="primary">重置</el-button>
        <el-button class="btn" @click="search" type="success">查询</el-button>
        <el-button class="btn" @click="addCode" type="success">添加兑换码</el-button>
      </div>
    </div>
    <div>
      <h4 style="margin:0 0 1.25rem 0">
        <el-tag type="info">基本列表</el-tag>
      </h4>
      <el-table :data="baseList" border style="width: 100%" tooltip-effect="dark">
        <el-table-column type="index" :index="indexMethod" label="序号" width="50" fixed="left">
        </el-table-column>
        <el-table-column prop="cdkey" label="兑换码" min-width="100" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="mall_type" label="渠道" min-width="100" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="order_id" label="订单号" min-width="80" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="mall_order_id" label="商城订单号" min-width="80" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" min-width="80" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="install_type" label="类型" min-width="80" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="status" label="状态" min-width="80" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="gmt_create" label="创建时间" min-width="100" show-overflow-tooltip >
        </el-table-column>
        <el-table-column prop="gmt_exchange" label="兑换时间" min-width="80" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="gmt_refund" label="退款时间" min-width="80" show-overflow-tooltip >
        </el-table-column>
        <el-table-column prop="operator" label="操作员" min-width="80" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="address" label="操作" min-width="150" fixed="right">
          <template slot-scope="scope" class="buttons">
            <div class="buttons" >
              <el-button type="primary" style="font-size: 0.75rem;text-align: center;padding: 0.38rem 0.45rem;height: 1.9rem" @click="edit(scope.row)" ><span class=" iconfont hhtx-pen"></span> 编辑</el-button>
              <el-button type="primary" style="font-size: 0.75rem;text-align: center; padding: 0.38rem 0.45rem;height: 1.9rem" @click="sendNotice(scope.row)" >重新发送短信</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination class="page-num" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="perPageNum" layout="total, sizes, prev, pager, next, jumper" :total="totalListNum">
        </el-pagination>
      </div>
    </div>
    <!-- 详情 -->
    <!--<div class="dialog" v-if="isAddShow">
      <div class="dialog-box">
        <el-tabs  v-model="orderDetailTabs">
          <el-tab-pane name="orderTab" label="添加兑换码" >
            <div class="content" style="overflow-y: auto;">
              <el-form ref="orderForm" :model="orderForm" :rules="orderRules" label-width="5rem" style="display:flex;flex-wrap:wrap;">
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="渠道">
                  <div class="bfc">
                    <el-input v-model="itemDetail.plate_no" @blur="isVehicleNumber(itemDetail.plate_no)" placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;font-size: 0.75rem;height: 1.9rem;" prop="order_status" label="商城订单号">
                  <div>
                    <el-select v-model="orderForm.order_status" placeholder="请选择" clearable>
                      <el-option v-for="item in orderStatusList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id" >
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;font-size: 0.75rem;height: 1.9rem;" prop="audit_desc" label="手机号">
                  <div class="bfc">
                    <el-input v-model="orderForm.audit_desc" placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <div style="margin-top: 1.25rem">
              <el-button class="btn" @click="close" type="primary">取消</el-button>
              <el-button class="btn" @click="addInfo('orderForm')" type="primary" >保存</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>-->
    <div class="dialog" v-if="isEditShow">
      <div class="dialog-box">
        <el-tabs >
          <el-tab-pane name="orderTab" label="编辑" >
            <div class="content" style="overflow-y: auto;">
              <el-form ref="cdkeyForm" :model="cdkeyForm" :rules="cdkeyRules" label-width="5rem" style="display:flex;flex-wrap:wrap;">
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="兑换码">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.cdkey}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;font-size: 0.75rem;height: 1.9rem;" prop="mall_order_id" label="商城订单号">
                  <div class="bfc">
                    <el-input v-model="cdkeyForm.mall_order_id" placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;font-size: 0.75rem;height: 1.9rem;" prop="status" label="状态">
                  <div>
                    <el-select v-model="cdkeyForm.status" placeholder="请选择" clearable>
                      <el-option v-for="item in statusList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id" >
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;font-size: 0.75rem;height: 1.9rem;" label="类型">
                  <div>
                    <el-select v-model="itemDetail.install_type" placeholder="请选择" clearable>
                      <el-option v-for="item in installTypeList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id" >
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="兑换时间">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.gmt_exchange}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="退款时间">
                  <template>
                    <div class="bfc">
                      <el-date-picker
                        v-model="itemDetail.gmt_refund"
                        type="datetime"
                        placeholder="请选择退款时间">
                      </el-date-picker>
                    </div>
                  </template>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="创建时间">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.gmt_create}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="更新时间">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.gmt_modified}}</label>
                </el-form-item>
              </el-form>
            </div>
            <div style="margin-top: 1.25rem">
              <el-button class="btn" @click="close" type="primary">取消</el-button>
              <el-button class="btn" @click="saveInfo('cdkeyForm')" type="primary">保存</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import { getList,getListDetail} from '@/api/cdkey'
  import { queryDict } from '@/api/queryDict'
  import store from '../../store'
  export default {
    data(){
      return{
        mallTypeList: [],
        statusList: [],
        installTypeList: [],
        form: {
          cdkey: '',
          mall_type: '',
          status: '',
          install_type: '',
          mall_order_id: '',
          mobile: ''
        },
        baseList: [],
        currentPage: 1,
        isEditShow: false,
        isAddShow: false,
        perPageNum: 10,
        totalListNum: 0,
        itemDetail: {},
        cdkeyForm: {
          mall_order_id: '',
          status: ''
        },
        cdkeyRules: {
          mall_order_id: [
            { max: 32, message: '长度不多于32个字符', trigger: 'blur' },
            { required: true, message: '请输入网厅订单号', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '请选择状态', trigger: 'change' }
          ]
        },
      }
    },
    created() {
      this.queryMallType()
      this.queryStatus()
      this.queryInstallType()
      this.fetchData()
    },
    methods: {
      aaa(val){
        return new Date(val)
      },
      queryMallType() {
        const params = {
          'group_id': 'MALL_TYPE',
          'status': '1'
        }
        queryDict(params).then(res => {
          this.mallTypeList = res.data ? res.data : []
        }).catch(er => { })
      },
      queryStatus() {
        const params = {
          'group_id': 'CDKEY_STATUS',
          'status': '1'
        }
        queryDict(params).then(res => {
          this.statusList = res.data ? res.data : []
        }).catch(er => { })
      },
      queryInstallType() {
        const params = {
          'group_id': 'INSTALL_TYPE',
          'status': '1'
        }
        queryDict(params).then(res => {
          this.installTypeList = res.data ? res.data : []
        }).catch(er => { })
      },
      fetchData() {
        const params = {
          'page': this.currentPage,
          'per_num': this.perPageNum,
          'cdkey': this.form.cdkey,
          'mall_type': this.form.mall_type,
          'status': this.form.status,
          'install_type': this.form.install_type,
          'gmt_create_start': this.form.gmt_create === undefined ? '':this.form.gmt_create === null ? '':this.form.gmt_create[0] === '' ? '' : this.praseDate((this.form.gmt_create)[0]),
          'gmt_create_end': this.form.gmt_create === undefined ? '':this.form.gmt_create === null ? '':this.form.gmt_create[1] === '' ? '' : this.praseDate((this.form.gmt_create)[1]),
          'gmt_exchange_start': this.form.gmt_exchange === undefined ? '':this.form.gmt_exchange === null ? '':this.form.gmt_exchange[0] === '' ? '' : this.praseDate((this.form.gmt_exchange)[0]),
          'gmt_exchange_end': this.form.gmt_exchange === undefined ? '':this.form.gmt_exchange === null ? '':this.form.gmt_exchange[1] === '' ? '' : this.praseDate((this.form.gmt_exchange)[1]),
          'mall_order_id': this.form.mall_order_id,
          'mobile': this.form.mobile
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        getList(params).then(res => {
          const data = res.data
          this.baseList = data ? data.result_list : []
          console.log('baseList',this.baseList)
          this.totalListNum = data ? data.total : 0
        }).catch(er => { })
        loading.close()
      },
      reset() {
        this.form = {}
        this.currentPage = 1
        this.perPageNum = 10
        this.fetchData()
      },
      addCode(){

      },
      alterCdkey() {
        console.log(store.getters.name)
        const params = {
          'cdkey': this.itemDetail.cdkey,
          'mall_order_id': this.cdkeyForm.mall_order_id,
          'status': this.cdkeyForm.status,
          'install_type': this.itemDetail.install_type,
          'gmt_refund': this.FormatAllDate(this.itemDetail.gmt_refund),
          'qqq': this.FormatAllDate(this.itemDetail.gmt_refund)
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        updateOrderDetail(params).then(res => {
          const data = res.code
          if (data === '0000') {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.fetchData()
            const orderIdParams = {
              'order_id': this.itemDetail.order_id
            }
            this.getOrderDetail(orderIdParams)
          } else {
            this.$message.error('更新失败，请重试！')
          }
        }).catch(er => { })
        loading.close()
      },
      exportList() {
        const params = {
          'order_id': this.form.order_id,
          'plat_id': this.form.plat_id,
          'receiver': this.form.receiver,
          'mobile': this.form.mobile,
          'order_status': this.form.order_status,
          'is_invoice': this.form.is_invoice,
          'gmt_create_end': this.form.gmt_create === undefined ? '':this.form.gmt_create === null ? '':this.form.gmt_create[1] === '' ? '' : this.praseDate((this.form.gmt_create)[1]),
          'gmt_create_start': this.form.gmt_create === undefined ? '':this.form.gmt_create === null ? '':this.form.gmt_create[0] === '' ? '' : this.praseDate((this.form.gmt_create)[0]),
          'gmt_pay_end': this.form.gmt_pay === undefined ? '':this.form.gmt_pay === null ? '':this.form.gmt_pay[1] === '' ? '' : this.praseDate((this.form.gmt_pay)[1]),
          'gmt_pay_start': this.form.gmt_pay === undefined ? '':this.form.gmt_pay === null ? '':this.form.gmt_pay[0] === '' ? '' : this.praseDate((this.form.gmt_pay)[0])
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        exportList(params).then(res => {
          const data = res.data
          if(data === null){
            this.$message.error(res.message)
          } else {
            this.downloadUrl = data.download_url
            window.location.href = this.downloadUrl
          }
        }).catch(er => {
          this.$message.error('导出失败，请重试！')
        })
        loading.close()
      },
      importInfo(){
        this.isImportShow = true
      },
      praseDate(date) {
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        return year + '-' + month + '-' + day
      },
      search() {
        this.currentPage = 1
        this.fetchData()
      },
      close() {
        if(1==1){
          this.$confirm('您有未保存的改动, 是否继续关闭?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.isDetailShow = !this.isDetailShow
            this.itemDetail={}
          }).catch(() => {
          });
        } else{
          this.isDetailShow = !this.isDetailShow
          this.itemDetail={}
        }
      },
      saveInfo(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.alterCdkey()
          } else {
            return false;
          }
        })
      },
      edit(row) {
        this.isEditShow = !this.isEditShow
        const params = {
          'cdkey': row['cdkey']
        }
        this.getCdkeyDetail(params)
      },
      getCdkeyDetail(params){
        getListDetail(params).then(res => {
          // let abc = res.data.map((item) => {
          //   item.gmt_ship = new Date(item.gmt_ship)
          //   return item
          // })
          let abcd = res.data
          console.log('abcd',abcd)
          abcd.gmt_create = new Date(res.data.gmt_create)
          abcd.gmt_exchange = new Date(res.data.gmt_exchange)
          abcd.gmt_modified = new Date(res.data.gmt_modified)
          abcd.gmt_refund = new Date(res.data.gmt_refund)
          this.itemDetail = Object.assign({}, abcd)
          console.log('this.itemDetail',this.itemDetail)
          this.cdkeyForm.mall_order_id = this.itemDetail.mall_order_id
          this.cdkeyForm.status = this.itemDetail.status
        }).catch(errInfo => { })
        // this.$nextTick(() => {
        //   this.forceUpdate()
        // })
      },
      indexMethod(index) {
        return index + (this.currentPage - 1) * this.perPageNum + 1
      },
      handleSizeChange(val) {
        this.perPageNum = val
        this.currentPage = 1
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.fetchData()
      },
      FormatAllDate(sDate) {
        var date = new Date(sDate);
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        //月
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        //日
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        //时
        if (hours >= 0 && hours <= 9) {
          hours = "0" + hours;
        }
        //分
        if (minutes >= 0 && minutes <= 9) {
          minutes = "0" + minutes;
        }
        //秒
        if (seconds >= 0 && seconds <= 9) {
          seconds = "0" + seconds;
        }
        //格式化后日期为：yyyy-MM-dd HH:mm:ss
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
          + " " + hours + seperator2 + minutes + seperator2 + seconds;
        return currentdate;
      }

    }
  }
</script>

<style lang="scss" scoped>
  .bfc {
    overflow: hidden;
  }
  .btn {
    float: right;
    margin: 0 0.9rem;
  }
  .form-item{
    font-size: 0.75rem;
  }
  .form-item-dialog-id{
    margin-top: 0.4rem;
  }
  .page-num {
    float: right;
  }
  .content {
    height: 24rem;
  }
  .dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.25);
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    &-box {
      width: 55%;
      height: 32rem;
      background-color: #fff;
      padding: 0.5rem 1rem;
    }
  }
</style>
